import React from 'react';
import {
    Alert,
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
    TextInput,
    Button,
    Picker,
    Navigator
} from 'react-native';

import NavigationBar from './NavigationBar'
import DatePicker from 'react-native-datepicker'
import * as requestService from './service/request'
import Properties from './config/properties'

export default class BillCreate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            billType: '1',
            billCostTime: '',
            billCost: '0',
            billPayType: '1',
            billName: '',
        };
    }
    _leftItemAction() {
        const { navigator } = this.props;
        if (navigator) {
            //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了
            navigator.pop();
        }
    }

    _rightItemAction() {
        console.log('右侧按钮点击了');
    }
    _pressButton() {
        const { navigator } = this.props;
        if (navigator) {
            //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了
            navigator.pop();
        }
    }
    submitForm = () => {
        if(this.state.billName == ''){
            Alert.alert('请输入账单名称');
            return;
        }

        if(this.state.billCostTime == ''){
            Alert.alert('请输入账单时间');
            return;
        }

        let addUri = Properties['common']['bill_add_uri']
        requestService.post(addUri, JSON.stringify(this.state)).then((responseData) => {
            alert(responseData.msg);
        });
    }

    render() {
        return (
            <View>
                <NavigationBar
                    title='创建账单'
                    leftItemTitle='<返回'
                    rightItemTitle=''
                    rightTextColor='#3393F2'
                    leftItemFunc={this._leftItemAction.bind(this)}
                    rightItemFunc={this._pressButton.bind(this)} />

                <View style={styles.item}>
                    <View style={styles.name_view}>
                        <Text style={styles.name_text}>名称:</Text>
                    </View>
                    <View style={styles.input}>
                        <TextInput onChangeText={(val) => this.setState({ billName: val })}></TextInput>
                    </View>
                </View>
                <View style={styles.item}>
                    <View style={styles.name_view}>
                        <Text style={styles.name_text} >金额:</Text>
                    </View>
                    <View style={styles.input}>
                        <TextInput keyboardType='numeric' onChangeText={(val) => this.setState({ billCost: val })}></TextInput>
                    </View>
                </View>
                <View style={styles.item}>
                    <View style={styles.name_view}>
                        <Text style={styles.name_text}>支付方式:</Text>
                    </View>
                    <View style={styles.input}>
                        <Picker
                            selectedValue={this.state.billPayType}
                            onValueChange={(val) => this.setState({ billPayType: val })}>
                            <Picker.Item label="现金" value="1" />
                            <Picker.Item label="支付宝" value="2" />
                            <Picker.Item label="微信" value="3" />
                            <Picker.Item label="信用卡" value="4" />
                            <Picker.Item label="其他" value="100" />
                        </Picker>
                    </View>
                </View>
                <View style={styles.item}>
                    <View style={styles.name_view}>
                        <Text style={styles.name_text}>类型:</Text>
                    </View>
                    <View style={styles.input}>
                        <Picker
                            selectedValue={this.state.billType}
                            onValueChange={(val) => this.setState({ billType: val })}>
                            <Picker.Item label="餐饮" value="1" />
                            <Picker.Item label="旅游" value="2" />
                            <Picker.Item label="汽车" value="3" />
                            <Picker.Item label="加油" value="4" />
                            <Picker.Item label="数码" value="5" />
                            <Picker.Item label="就医" value="6" />
                            <Picker.Item label="图书" value="7" />
                            <Picker.Item label="其他" value="100" />
                        </Picker>
                    </View>
                </View>
                <View style={styles.item}>
                    <View style={styles.name_view}>
                        <Text style={styles.name_text}>时间:</Text>
                    </View>
                    <View style={styles.input}>
                        <DatePicker
                            style={{ width: 200 }}
                            date={this.state.billCostTime}
                            mode="date"
                            placeholder="请选择消费时间"
                            format="YYYY-MM-DD"
                            minDate="1970-01-01"
                            maxDate="2999-01-01"
                            confirmBtnText="Confirm"
                            cancelBtnText="Cancel"
                            customStyles={{
                                dateIcon: {
                                    position: 'absolute',
                                    left: 0,
                                    top: 4,
                                    marginLeft: 0
                                },
                                dateInput: {
                                    marginLeft: 36
                                }
                                // ... You can check the source to find the other keys. 
                            }}
                            onDateChange={(date) => { this.setState({ billCostTime: date }) }}
                        />
                    </View>
                </View>
                <View style={[styles.item, styles.submit]}>

                    <View style={styles.input}>
                        <Button title="提交" accessibilityLabel="试试看" onPress={this.submitForm}></Button>
                    </View>
                </View>
            </View>

        );
    }
}
var styles = StyleSheet.create({
    name_view: {
        width: 80,
    },
    name_text: {
        fontSize: 20,
        textAlign: 'center',
    },
    submit: {
        marginTop: 40,
        marginLeft: 10,
        marginRight: 10,
    },
    input: {
        flex: 1,
    },
    item: {
        //flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    }
});